<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
        .container { border: 1px solid #ddd; padding: 20px; border-radius: 5px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { width: 100%; padding: 8px; box-sizing: border-box; }
        button { padding: 10px 15px; background-color: #4F46E5; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background-color: #4338CA; }
        .response { margin-top: 20px; padding: 15px; background-color: #f5f5f5; border-radius: 5px; white-space: pre-wrap; }
        .url-group { display: flex; gap: 10px; align-items: center; }
        .url-group input { flex: 1; }
        .error { color: red; }
    </style>
</head>
<body>
    <div class="container">
        <h1>API连接测试</h1>
        
        <div class="form-group">
            <label>后端URL:</label>
            <div class="url-group">
                <select id="protocol">
                    <option value="http://">http://</option>
                    <option value="https://">https://</option>
                </select>
                <input type="text" id="baseUrl" value="localhost:8000" placeholder="后端服务器地址">
            </div>
        </div>
        
        <h2>登录测试</h2>
        <div class="form-group">
            <label>用户名:</label>
            <input type="text" id="username" value="admin" placeholder="请输入用户名">
        </div>
        
        <div class="form-group">
            <label>密码:</label>
            <input type="password" id="password" value="123456" placeholder="请输入密码">
        </div>
        
        <button id="testLoginBtn">测试登录</button>
        <button id="testCorsBtn">测试CORS</button>
        
        <div class="response">
            <h3>响应信息:</h3>
            <pre id="responseText">请点击测试按钮...</pre>
        </div>
    </div>
    
    <script>
        const testLoginBtn = document.getElementById('testLoginBtn');
        const testCorsBtn = document.getElementById('testCorsBtn');
        const responseText = document.getElementById('responseText');
        
        function getBaseUrl() {
            const protocol = document.getElementById('protocol').value;
            const baseUrl = document.getElementById('baseUrl').value;
            return protocol + baseUrl;
        }
        
        function logResponse(message) {
            responseText.textContent = message;
            console.log(message);
        }
        
        testLoginBtn.addEventListener('click', async function() {
            const baseUrl = getBaseUrl();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            logResponse('正在发送登录请求...\nURL: ' + baseUrl + '/auth/login');
            
            try {
                // 方法1: 使用 FormData
                const formData = new FormData();
                formData.append('username', username);
                formData.append('password', password);
                
                logResponse('使用 FormData 发送请求...\n' + JSON.stringify(Object.fromEntries(formData)));
                
                const startTime = Date.now();
                const response = await axios.post(baseUrl + '/auth/login', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    withCredentials: true,
                    timeout: 5000
                });
                const endTime = Date.now();
                
                logResponse('登录成功！耗时: ' + (endTime - startTime) + 'ms\n\n' + 
                           '状态码: ' + response.status + ' ' + response.statusText + '\n\n' +
                           '响应头: ' + JSON.stringify(response.headers, null, 2) + '\n\n' +
                           '响应体: ' + JSON.stringify(response.data, null, 2));
                            
                // 如果登录成功，测试访问受保护资源
                if (response.data.access_token) {
                    try {
                        logResponse(responseText.textContent + '\n\n\n正在测试访问受保护资源...');
                        const userResponse = await axios.get(baseUrl + '/auth/me', {
                            headers: {
                                'Authorization': 'Bearer ' + response.data.access_token
                            },
                            withCredentials: true
                        });
                        logResponse(responseText.textContent + '\n\n用户信息获取成功！\n' + 
                                   '响应体: ' + JSON.stringify(userResponse.data, null, 2));
                    } catch (userError) {
                        logResponse(responseText.textContent + '\n\n获取用户信息失败: ' + 
                                   (userError.response ? JSON.stringify(userError.response.data) : userError.message));
                    }
                }
            } catch (error) {
                if (error.response) {
                    // 服务器返回了错误状态码
                    logResponse('登录失败！\n\n状态码: ' + error.response.status + '\n\n响应体: ' + 
                               JSON.stringify(error.response.data, null, 2));
                } else if (error.request) {
                    // 请求已发送但没有收到响应
                    logResponse('请求失败！服务器没有响应。\n错误: ' + error.message);
                } else {
                    // 设置请求时发生错误
                    logResponse('请求配置错误: ' + error.message);
                }
                console.error('登录请求失败:', error);
            }
        });
        
        testCorsBtn.addEventListener('click', async function() {
            const baseUrl = getBaseUrl();
            logResponse('正在测试CORS配置...\nURL: ' + baseUrl + '/health');
            
            try {
                const response = await axios.get(baseUrl + '/health', {
                    withCredentials: true,
                    timeout: 5000
                });
                
                logResponse('CORS测试成功！\n\n状态码: ' + response.status + '\n\n响应头: ' + 
                           JSON.stringify(response.headers, null, 2) + '\n\n响应体: ' + 
                           JSON.stringify(response.data, null, 2));
            } catch (error) {
                if (error.response) {
                    logResponse('CORS测试失败！\n\n状态码: ' + error.response.status + '\n\n响应体: ' + 
                               JSON.stringify(error.response.data, null, 2));
                } else if (error.request) {
                    logResponse('CORS测试失败！服务器没有响应。\n错误: ' + error.message);
                } else {
                    logResponse('CORS测试配置错误: ' + error.message);
                }
                console.error('CORS测试失败:', error);
            }
        });
    </script>
</body>
</html>